<template>
  <div class="potential">
    <h2>购买转化潜力</h2>
    <div class="traffic">
      <div
        id="buyChart"
        :style="{width: '400px', height: '260px'}"
      ></div>

    </div>
  </div>
</template>

<script>
import echarts from "vue-echarts/components/ECharts.vue";
import moment from "moment";

export default {
  name: "potential",
  components: {},

  data() {
    return {
      dataList: [],
      maxValue: 0,
      characteristics: [], //特征
      colorList: []
    };
  },
  mounted() {
    this.getMaxFlowShop();
  },

  methods: {
    getMaxFlowShop() {
      let myChart = this.$echarts.init(document.getElementById("buyChart"));
      var option = {
        grid: {
          left: 0,
          right: 0,
          bottom: "20%",
          top: 30,
          containLabel: false
        },
        // legend: {
        //   //图例组件，颜色和名字
        //   right: 0,
        //   top: 0,
        //   itemGap: 16,
        //   itemWidth: 18,
        //   itemHeight: 10,
        //   // data: [
        //   //   {
        //   //     name: "总数量"
        //   //     //icon:'image://../wwwroot/js/url2.png', //路径
        //   //   },
        //   //   {
        //   //     name: "过期数量"
        //   //   }
        //   // ],
        //   textStyle: {
        //     color: "#fff",
        //     fontStyle: "normal",
        //     fontFamily: "微软雅黑",
        //     fontSize: 12
        //   }
        // },
        xAxis: [
          {
            type: "category",
            //	boundaryGap: true,//坐标轴两边留白
            data: ["租赁", "联营"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
              //rotate: 50
            },
            axisTick: {
              //坐标轴刻度相关设置。
              show: false
            },
            axisLine: {
              //坐标轴轴线相关设置
              show: true,
              lineStyle: {
                color: "#7358a3",
                opacity: 1
              }
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 12
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#fff"],
                opacity: 1
              }
            }
          }
        ],
        series: [
          {
            name: "租赁",
            type: "bar",
            data: [45, 42],
            barWidth: 40,
            barGap: 0, //柱间距离
            label: {
              //图形上的文本标签
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#fff",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#a886c9"
                  },
                  {
                    offset: 1,
                    color: "#442c81"
                  }
                ])
                //barBorderRadius: 50,
                // borderWidth: 0
              }
            }
          },
          {
            name: "联营",
            type: "bar",
            data: [9, 20],
            barWidth: 40,
            barGap: 0.2, //柱间距离
            label: {
              //图形上的文本标签
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#fff",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              normal: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#87c9c9"
                  },
                  {
                    offset: 1,
                    color: "#2f7c82"
                  }
                ])
                // barBorderRadius: 50,
                // borderWidth: 0
              }
            }
          }
        ]
      };

      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.potential {
  width: 400px;
  height: 280px;
  margin-top: 20px;
  float: left;
  margin-left: 40px;
  h2 {
    margin: 20px auto 0;
  }
  .traffic {
    width: 400px;
    height: 220px;
    position: relative;
  }
}
</style>
